'use strict';
import React from 'react';
import {
    View,
    ListView,
    Image,
    Text,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import ToolBar from '../Components/ToolBar';
import ScrollTabView from 'react-native-scrollable-tab-view';
import Global from '../Commom/GlobalConst';
import PlayDetailsPage from '../Pages/PlayDetailsPage';
import SpecialtyDetailsPage from '../Pages/SpecialtyDetailsPage';
import StayDetailsPage from '../Pages/StayDetailsPage';
import MoreTabBar from '../Components/MoreTabBar';
import RuralLibraryAPIService from "../Commom/RuralLibraryAPIService";
let eatOrLiveItemWidth = Global.Const.size.width / 3;

const styles = StyleSheet.create({
    contentContainerStyle: {
        justifyContent: 'flex-start',
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    eatOrLiveItemStyle: {
        width: eatOrLiveItemWidth,
        alignItems: 'center',
        padding: 5,
        paddingBottom: 0,
    },
    eatOrLiveItemImg: {
        width: eatOrLiveItemWidth - 10,
        height: eatOrLiveItemWidth - 10,
    },
    eatOrLiveItemTitle: {
        width: eatOrLiveItemWidth - 10,
        fontSize: 13,
        color: 'black',
        marginTop: 3,
        textAlign: 'center'
    },
    livePrice: {
        fontSize: 12,
        color: 'red',
        textAlign: 'center'
    }
});

class MoreDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            eatDataSource: new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2
            }),
            liveDataSource: new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2
            }),
            playDataSource: new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2
            }),
            flag: true
        };
    }

    componentDidMount() {
        RuralLibraryAPIService.beerAndSkittlesList(this.props.id).then((ret)=> {
            this.setState({
                eatDataSource: this.state.eatDataSource.cloneWithRows(ret.all_eat_list.length > 0 ? ret.all_eat_list : []),
                liveDataSource: this.state.liveDataSource.cloneWithRows(ret.all_live_list.length > 0 ? ret.all_live_list : []),
                playDataSource: this.state.playDataSource.cloneWithRows(ret.all_play_list.length > 0 ? ret.all_play_list : []),

            })
        }).catch((err)=> {

        });
    }

    _renderEatRow(rowData) {
        return (
            <View
                style={[
                    styles.eatOrLiveItemStyle,
                    {height: rowData.price ? eatOrLiveItemWidth + 40 : eatOrLiveItemWidth + 20,}
                ]}>
                <TouchableOpacity onPress={() => {
                    this.props.navigator.push({
                        name: 'SpecialtyDetailsPage',
                        component: SpecialtyDetailsPage,
                        passProps: {
                            ID: rowData.id
                        }
                    });
                }}>
                    <Image
                        style={styles.eatOrLiveItemImg}
                        source={{uri:rowData.images}}/>
                    <Text
                        numberOfLines={1}
                        style={styles.eatOrLiveItemTitle}>{rowData.title}</Text>
                </TouchableOpacity>
            </View>
        );
    }

    _renderLiveRow(rowData) {
        return (
            <View
                style={[
                    styles.eatOrLiveItemStyle,
                    {height: rowData.price ? eatOrLiveItemWidth + 40 : eatOrLiveItemWidth + 20,}
                ]}>
                <TouchableOpacity onPress={() => {
                    this.props.navigator.push({
                        name: 'StayDetailsPage',
                        component: StayDetailsPage ,
                        passProps: {
                            ID: rowData.id
                        }
                    });
                }}>
                    <Image
                        style={styles.eatOrLiveItemImg}
                        source={{uri:rowData.images}}/>
                    <Text
                        numberOfLines={1}
                        style={styles.eatOrLiveItemTitle}>{rowData.title}</Text>
                    <Text
                        style={styles.livePrice}>{'￥' + rowData.price}</Text>
                </TouchableOpacity>
            </View>
        );
    }

    _renderPlayRow(rowData) {
        return (
            <TouchableOpacity onPress={() => {
                this.props.navigator.push({
                    name: 'PlayDetailsPage',
                    component: PlayDetailsPage,
                    passProps: {
                        ID: rowData.id
                    }
                });
            }}>
                <View style={{
                    padding: 10,
                    paddingBottom: 0,
                    alignItems: 'center',
                }}>
                    <Image style={{width: Global.Const.size.width - 20, height: (Global.Const.size.width - 20) * 0.33}}
                           source={{uri:rowData.images}}/>
                    <Text style={{
                        position: 'absolute',
                        bottom: 0,
                        left: 10,
                        right: 10,
                        backgroundColor: 'rgba(0,0,0,0.4)',
                        padding: 5,
                        color: 'white',
                        paddingLeft: 10
                    }}>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        let initialPage = this.props.initialPage;
        return (
            <View style={{flex: 1,backgroundColor:'white'}}>
                <ToolBar
                    leftFunc={()=> {
                        this.props.navigator.pop();
                    }}
                    title='更多'
                    rightFunc={()=> {
                    }}
                    rightImage={0}/>
                <ScrollTabView
                    initialPage={initialPage}
                    renderTabBar={() => <MoreTabBar tabBarNames={["吃什么","住哪里","玩什么"]}/>}
                >
                    <ListView
                        tabLabel="吃什么"
                        dataSource={this.state.eatDataSource}
                        enableEmptySections={true}
                        renderRow={(rowData) => this._renderEatRow(rowData)}
                        contentContainerStyle={styles.contentContainerStyle}
                    />
                    <ListView
                        tabLabel="住哪里"
                        dataSource={this.state.liveDataSource}
                        enableEmptySections={true}
                        renderRow={(rowData) => this._renderLiveRow(rowData)}
                        contentContainerStyle={styles.contentContainerStyle}
                    />
                    <ListView
                        tabLabel="玩什么"
                        dataSource={this.state.playDataSource}
                        enableEmptySections={true}
                        renderRow={(rowData) => this._renderPlayRow(rowData)}
                    />
                </ScrollTabView>
            </View>
        )
    }
}

export default MoreDetails;